<template>
  <view class="subject-list">
    <view class="subject-item" v-for="item in subjectList" :key="item.id" :style="{ backgroundColor: item.bgColor }"
      @click="handlePhoto(item)">
      <image class="icon" :src="item.icon" mode="aspectFit"></image>
      <view class="flex-1 margin-left">
        <u-text :text="item.name" size="36rpx" color="#333"></u-text>
        <u-text :text="item.subName" size="32rpx" color="#999"></u-text>
      </view>
      <view>
        <image :src="item.arrow" mode="aspectFit" style="width: 40rpx; height: 40rpx"></image>
      </view>
    </view>
    <up-cropper ref="customCropperRef" :canScale="false" :canRotate="false" @confirm="onCustomCropperConfirm" />
  </view>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';

const customCropperRef = ref(null)
const subjectList = ref([
  {
    id: 2,
    name: '语文',
    bgColor: '#FFEBEB',
    icon: '/static/image/img-chinese.png',
    subName: 'Chinese',
    arrow: '/static/icon/icon-arrow-right-fill-red.png'
  },
  {
    id: 1,
    name: '数学',
    bgColor: '#EBF3FF',
    icon: '/static/image/img-math.png',
    subName: 'Maths',
    arrow: '/static/icon/icon-arrow-right-fill-blue.png'
  },
  {
    id: 3,
    name: '英语',
    bgColor: '#FFFAF3',
    icon: '/static/image/img-english.png',
    subName: 'English',
    arrow: '/static/icon/icon-arrow-right-fill-yellow.png'
  }
]);

const handlePhoto = (item) => {
  // 跳转到 nvue 自定义相机页面
  uni.navigateTo({
    url: `/pages/common/camera/index?id=${item.id}&subject=${item.name}`
  });
};

const onCustomCropperConfirm = (e) => {
  console.log(e);
  customCropperRef.value.confirm();
};
</script>
<style scoped lang="scss">
.subject-list {
  display: flex;
  flex-direction: column;
  padding: 0 30rpx;

  .subject-item {
    width: 100%;
    height: 180rpx;
    border-radius: 32rpx;
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60rpx 0 30rpx;
    box-sizing: border-box;

    .icon {
      width: 180rpx;
      height: 180rpx;
    }
  }
}
</style>